<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="./js/axios.min.js"></script>
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="./js/echarts.js"></script>
    <link rel="stylesheet" href="./css/main.css"/>
</head>
<body>
<div id="app">
    <div style="width: 97%;" class="topInfo">
        <span>欢迎<a style="color: red;font-size: 20px">{{username}}</a>使用后台管理系统</span>
    </div>
    <div class="branchInfo">
        <div class="branchItem">
            <div class="left">
                <div style="background: #f5c847">
                    <img src="./imges/branch.png" alt="" width="60px" height="60px">
                </div>
            </div>
            <div class="right">
                <div class="count">{{books}}</div>
                <div class="name">图书总数</div>
            </div>
        </div>
        <div class="branchItem">
            <div class="left">
                <div style="background: #44aff0">
                    <img src="./imges/branch.png" alt=""width="60px" height="60px">
                </div>
            </div>
            <div class="right">
                <div class="count">{{staffcount}}</div>
                <div class="name">员工总数</div>
            </div>
        </div>
        <div class="branchItem">
            <div class="left">
                <div style="background: #f36f8a">
                    <img src="./imges/branch.png" alt="" height="60px" width="60px">
                </div>
            </div>
            <div class="right">
                <div class="count">{{getusershu}}</div>
                <div class="name">用户总数</div>
            </div>
        </div>
    </div>

    <fieldset>
        <legend class="legend">数据统计</legend>
        <el-row>
            <el-col :span="8">
                <div class="grid-content">
                    <div class="title">借阅数量统计图</div>
                    <div id="fig1" style="width: 90%;height: 400px"></div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="grid-content">
                    <div class="title">图书类型统计</div>
                    <div id="fig2" style="width: 90%;height: 400px"></div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="grid-content">
                    <div class="title">部门人员统计</div>
                    <div id="fig3" style="width: 90%;height: 400px"></div>
                </div>
            </el-col>
        </el-row>
    </fieldset>

</div>
</body>
<script>
    let app=new Vue({
        el: "#app",
        data: {
            username: "小张",
            userinfo: {},
            books: "",
            staffcount: "",
            getusershu: "",
            shu: [],
            name2: [],
            staff: {},
            aaa: [],
            name3: [],

        },
        created() {

            this.getbooks()
            this.getstaffcount()
            this.getusercount()
            this.tu()
            this.tu2()
            this.tu3()
        },
        methods: {
            getbooks() {
                axios.post("/statistics/chart").then(res => {
                    this.books = res.data.data.shu;
                })
            },
            getstaffcount() {
                axios.post("/statistics/getstaffshu").then(res => {
                    this.staffcount = res.data.data.staffshu
                })
            },
            getusercount() {
                axios.post("/statistics/getbookcount").then(res => {
                    this.getusershu = res.data.data.usershu
                })
            },
            // 类型统计图
            tu() {
                axios.get("/echarts/select").then(result => {
                    console.log(result)
                    for (let i = 0; i < result.data.length; i++) {
                        // push 追加，最后一位追加
                        this.name2.push(result.data[i].name)
                        this.shu.push(result.data[i].value)
                    }
                    var myChart = echarts.init(document.getElementById('fig2'));
                    myChart.setOption({
                        title: {
                            text: '借阅数量'
                        },
                        tooltip: {},
                        legend: {
                            data: ["数量"]
                        },
                        xAxis: {
                            data: this.name2
                        },
                        yAxis: {},
                        series: [
                            {
                                name: '数',
                                type: 'bar',
                                data: this.shu
                            }
                        ]
                    })
                })
            },
            tu2() {
                axios.get("/echarts/selectstaff").then(result => {

                    var myChart = echarts.init(document.getElementById('fig3'));
                    myChart.setOption({
                        title: {
                            text: '人员',

                            left: 'center'
                        },
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            orient: 'vertical',
                            left: 'left'
                        },
                        series: [
                            {
                                name: 'Access From',
                                type: 'pie',
                                radius: '50%',
                                data: result.data,
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    })
                })
            },
        tu3(){

            axios.get("/statistics/aaaa").then(result => {
                var myChart = echarts.init(document.getElementById('fig1'));
                myChart.setOption({
                    title: {

                        left: 'center'
                    },
                    tooltip: {
                        trigger: 'item'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 'left'
                    },
                    series: [
                        {
                            name: 'Access From',
                            type: 'pie',
                            radius: '50%',
                            data: result.data.data,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                                }
                            }
                        }
                    ]
                })
            })


        }
        }
    })
</script>

</html>
